<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>btn-animate</title>
		<link rel="stylesheet" href="css/reset.css"/>
		<style>
		
		/*red-block*/
			.red-block{
				width: 500px;
				height: 200px;
				background-color: #ff5151;
				text-align: center;
				line-height: 50px;
				position: relative;
				z-index: 1;
			}
			.line{
				width: 150px;
				height: 50px;
				border-top: 1px solid white;
				border-bottom: 1px solid white;
				display: inline-block;
				position: absolute;
				left: 158px;
				top: 69px;
				z-index: 4;
				transition: transform 300ms ease-in-out 150ms;
				transform: scale(0);
			}
			.wrap{
				width: 150px;
				height: 50px;
				display: inline-block;				
				position: absolute;
				text-align: center;
				left: 158px;
				top: 69px;
				background: rgba(255,255,255,0.6);
				z-index: 2;
				transition: transform 300ms ease-in-out 150ms;
				transform:scale(1);
				
				}
			

			
			.content{
				width: 150px;
				height: 50px;
				position: absolute;
				left: 158px;
				top: 69px;
				letter-spacing: 0px;
				z-index: 5;
				color: white;
				transition: letter-spacing 300ms ease-in-out 150ms;
			}
			.content:hover~.line{
				transform: scale(1);
				cursor: pointer;
				
			}
			
			.content:hover~.wrap{
				opacity: 1;
				transform: scale(0);
				cursor: pointer;
				
			}
		
			
			.content:hover{
				letter-spacing: 2px;
		
				cursor: pointer;
				
			}
			
		/*black-block*/	
		.black-block{
				width: 500px;
				height: 200px;
				background-color: #333333;
				text-align: center;
				line-height: 50px;
				position: relative;
				z-index: 1;
			}
	
		.black-block .black-inner,.black-block .black-outer{
				width: 150px;
				height: 50px;
				display: inline-block;				
				position: absolute;
				text-align: center;
				left: 158px;
				top: 69px;
				background: rgba(255,255,255,0.6);
				z-index: 2;
				transition: transform 300ms ease-in-out 150ms;
				transform: rotate(0deg);
				
				}
			

			
		.black-block .content{
				width: 150px;
				height: 50px;
				position: absolute;
				left: 158px;
				top: 69px;
				letter-spacing: 0px;
				z-index: 5;
				color: white;
				transition: letter-spacing 300ms ease-in-out 150ms;
			}
			
			.content:hover~.black-outer{
				transform: rotate(45deg);
				background: rgba(255,255,255,0);
				border: 1px solid white;
				cursor: pointer;
				
			}
			
			.content:hover~.black-inner{
				opacity: 1;
				transform: rotate(-45deg);
				background: rgba(255,255,255,0);
				border: 1px solid white;
				cursor: pointer;
				
			}
		
			
			/*green-block*/
			.green-block{
				width: 500px;
				height: 200px;
				background-color: yellowgreen;
				text-align: center;
				line-height: 50px;
				position: relative;
				z-index: 1;
			}
	
		.green-block .inner{
				width: 150px;
				height: 50px;
				display: inline-block;				
				position: absolute;
				text-align: center;
				left: 158px;
				top: 69px;
				background: rgba(255,255,255,0.6);
				z-index: 2;
				transition: transform 300ms ease-in-out 150ms;
				transform: scale(1);
				
				}
		.green-block .outer	{
				width: 150px;
				height: 50px;
				display: inline-block;				
				position: absolute;
				text-align: center;
				left: 158px;
				top: 69px;
				/*background: rgba(255,255,255,0.6);*/
				z-index: 2;
				border: 1px solid white;
				transition: transform 300ms ease-in-out 150ms;
				transform: scale(1.2);
				opacity: 0;
		}

			
		.green-block .content{
				width: 150px;
				height: 50px;
				position: absolute;
				left: 158px;
				top: 69px;
				letter-spacing: 2px;
				z-index: 5;
				color: white;
				transition: letter-spacing 300ms ease-in-out 150ms;
			}
			
			.content:hover~.outer{
				transform: scale(1);
				opacity: 1;
				cursor: pointer;
				
			}
			
			.content:hover~.inner{
				opacity: 1;
				transform: scale(0);;
				
			
				cursor: pointer;
				
			}
		</style>
	</head>
	<body>
		<div class="red-block fl">
			<span class="content">HOVER&nbsp;ME</span>
			<span class="wrap"></span>
			<span class="line"></span>		
		</div>
		<div class="black-block fl">
			<span class="content">HOVER&nbsp;ME</span>
			<span class="black-inner"></span>
			<span class="black-outer"></span>
		</div>
		
		<div class="green-block fl">
			<span class="content">HOVER&nbsp;ME</span>
			<span class="inner"></span>
			<span class="outer"></span>
		</div>
	</body>
</html>
